<script setup lang="ts">
    import { reactive, ref } from 'vue';
    import { useNoticeStore } from '@/stores/notice';
    import { NoticeEnum } from '@/enums';

    const noticeStore = useNoticeStore();

    // 菜单数据
    const menuOptions = reactive([
        {
            code: NoticeEnum.ALL,
            labelName: "全部消息"
        },{
            code: NoticeEnum.COMMENT,
            labelName: "评论"
        },{
            code: NoticeEnum.FANS,
            labelName: "粉丝"
        },{
            code: NoticeEnum.LIKE,
            labelName: "赞"
        },
    ]);
    // 初始化菜单数据
    const item = ref(menuOptions[0]);

    const handleCommand = (command: any) => {
        const data = menuOptions.find((item) => item.code === command);
        if(data) {
            item.value = data;
            noticeStore.getNoticePage(item.value.code, true);
        }
    }
</script>
<template>
    <div class="header">
        <span class="text">互动消息</span>
        <div class="more">
            <el-dropdown :teleported ="false" trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <span>{{ item.labelName }}</span>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item 
                            v-for="(item, index) in menuOptions" 
                            :key="index"
                            :command="item.code">
                            {{ item.labelName }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .header {
        margin: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        user-select: none;
        height: 20px;
        .text {
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #161823;
            flex-direction: row;
            flex-grow: 0;
            align-items: center;
            font-weight: 500;
            display: flex;
            overflow: hidden;
            font-size: 16px;
        }
        .more {
            cursor: pointer;
        }
    }
</style>